<template>
	<div>
		<div>
			<el-row :gutter="20">
				<el-col :span="6" class='col'>
					<div class="grid-content bg-purple" style="height: 50px;">
						<span style="font-size: 16px;">用户ID/名称:</span><span>
							<el-input style="width: 200px;" v-model="IDcard"></el-input>
						</span>
					</div>
				</el-col>
				<el-col :span="8" class='col'>
					<div class="grid-content bg-purple" style="height: 50px;">
						<span>日期:</span>
						<span>
							<el-date-picker v-model="value1" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</span>
					</div>
				</el-col>
				<el-col :span="6" class='col'>
					<div class="grid-content bg-purple" style="height: 50px;">
						<el-row>
							<el-button type="primary" round>查询</el-button>
							<el-button type="warning" round @click='clear'>重置</el-button>
						</el-row>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="span">
			<span>用户总量:</span>
			<span>订单量:</span>
			<span>消费总额:</span>
		</div>
		<div class='able'>
			<el-table :data="tableData" style="width: 100%" height="250">
				<el-table-column fixed prop="userid" label="用户ID" width="150">
				</el-table-column>
				<el-table-column prop="username" label="用户昵称" width="120">
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" width="120">
				</el-table-column>
				<el-table-column prop="number" label="商圈店铺数量" width="120">
				</el-table-column>
				<el-table-column prop="orderform" label="订单量" width="120">
				</el-table-column>
				<el-table-column prop="consume" label="消费额" width="120">
				</el-table-column>
				<el-table-column prop="frequency" label="消费频次" width="120">
				</el-table-column>
				<el-table-column>
					<el-row>
						<el-button type="primary" round="" @click='dialogTableVisible = true'>消费分析</el-button>
					</el-row>
				</el-table-column>
			</el-table>
			<el-dialog title="用户详细信息" :visible.sync="dialogTableVisible">
				<div style="border-bottom: black solid 1px;margin-bottom: 20px;">
					<span>用户ID:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>用户昵称:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<span>联系电话:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</div>
				<div>
					<span style='font-size:20px;'>用户消费情况</span>
					<div style="font-size: 18px;margin-top: 20px;">
						日期： <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始日期"
							end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
				<el-table :data="gridData">
					<el-table-column property="date" label="商户编号" width="150"></el-table-column>
					<el-table-column property="name" label="商户名" width="200"></el-table-column>
					<el-table-column property="shuliang" label="订单商品数量" width="200"></el-table-column>
					<el-table-column property="money" label="订单金额" width="200"></el-table-column>
					<el-table-column property="newdate" label="消费日期" width="200"></el-table-column>
					<el-table-column property="address" label="行业"></el-table-column>
				</el-table>
			</el-dialog>
		</div>

	</div>
</template>

<script>
	import {
		getStoreList
	} from '../../../api/storeManage.js'
	export default {
		created() {
			this.getStoreList()
		},
		data() {
			return {
				IDcard: '',
				value1: '',
				value2: '',
				tableData: [{
					userid: '140',
					username: '王小虎',
					phone: '15573745015',
					number: '123',
					orderform: '123',
					consume: 200333,
					frequency: '123'
				}],
				fullscreen: true,
				dialogTableVisible: false,
				gridData: []
			}
		},
		methods: {
			clear() {
				this.IDcard = ''
				this.value1 = ''
			},
			async getStoreList() {
				this.gridData = await getStoreList()
				console.log(gridData)
			},
		},
	}
</script>

<style scoped>
	.col {
		text-align: center;
		line-height: 50px;
	}

	.bg-purple {
		background-color: white;
		height: 40px;
	}

	.span {
		margin-top: 20px;
		background-color: white;
		border-radius: 10px;
	}

	.span span {
		padding-left: 50px;
	}

	.able {
		margin-top: 20px;
		background-color: white;
		border-radius: 5px;
	}
</style>
